<template>
	<el-dialog title="角色权限分配" :visible.sync="visible" width="630px" :center="false" :before-close="handleClose">
		<div slot="title" class="dialog-header-title">
			<i class="el-icon-edit" style="color: #FFF"></i>&nbsp;
			<span style="color: #FFF">角色权限分配</span>
		</div>
		<div style="text-align: left;">
				<el-transfer v-model="value" :data="data"  size="mini"
					:titles="['所有权限','角色权限']"
				/>
		</div>
		<span slot="footer" class="dialog-footer">
			<!-- <el-button size="mini" type="primary" @click="onSubmit">确定</el-button>
			<el-button size="mini" @click="closeDialog">取消</el-button> -->
			
			<el-button type="primary" plain @click="onSubmit" size="mini">
				<i class="el-icon-check"></i>
				确定</el-button>
			<el-button @click="closeDialog" size="mini">
				<i class="el-icon-close"></i>
				取消</el-button>
		</span>
	</el-dialog>
</template>

<script>
	"use strict";
import { getPermissionList} from '@/api/permission';
import {getPermissionInfoByRoleId, updateRolePermission} from '@/api/rolePermission';
	export default {
		data() {
			
			
			
			return {
				visible: false,
				roleId: '',
				data:[],
				value:[],
				query:{
					permissionIdList:[],
					id:''
				}
			}

		},
		methods: {
			
			ShowDialog(row) {
				this.roleId = row.id
				this.init();
			},
			
			closeDialog(){
				this.data = [];
				this.visible = false;
			},
			
			
			init(){
				getPermissionList().then(response =>{
					let list = response.data.extend;
						this.data = [];
						list.forEach((item) =>{
							this.data.push({
								key: item.permissionId,
								label: item.permissionName,
							});
						});	
				
					getPermissionInfoByRoleId({"roleId":this.roleId}).then(response => {
						
						this.value = response.data.extend;							
						this.visible = true;
						
					}).catch(error => {
						console.info("失败");
						console.info(error.message);
					});
					
				}).catch(error => {
					console.info(error.message);
					console.info("失败！");
				});
				
				
			},
			
			onSubmit(){
				this.query.permissionIdList = this.value;
				this.query.id = this.roleId;
				updateRolePermission(this.query).then(response => {
					this.$message({
						duration:5000,
						type: 'success',
						message: '角色权限维护成功！'
					});
					this.visible = false;
				}).catch(error => {
					this.$message({
						duration:5000,						type: 'error',
						message: '角色权限维护失败！'
					});
					this.visible = false;
				});
			},
			
			handleClose() {
				this.data = [];
				this.visible = false;
			}
			
			
			
		}
	};
</script>

<style>
</style>
